<template>
  <Modal
    v-model="show"
    :title="!showType ? '训练内容' : '查看训练内容'"
    :footer-hide="true"
    :width="1000"
    :mask-closable="false"
    @on-cancel="closeModal"
  >
    <Tabs v-model="currentValue" @on-click="changeTab">
      <span style="color: #ff9900; font-size: 10px; line-height: 2" slot="extra"><Icon type="ios-information-circle-outline" />每个节点最多可绑定9项训练内容</span>
      <TabPane :label="tab.label" :name="tab.name" v-for="tab in showTablist" :key="tab.name">
        <relative-list
          :key="tab.name"
          :ref="`${tab.name}Ref`"
          :type="tab.name"
          :code="currentData.typeCode"
          :id="currentData.id"
          :directionArr="directionArr"
          :getType="getType"
        />
      </TabPane>
      <!-- <TabPane label="试卷" name="testPaper">
        <relative-list ref="testPaperRef" type="testPaper" :id="currentData.id"></relative-list>
      </TabPane>
      <TabPane label="课件" name="experiment">
        <relative-list
          ref="experimentRef"
          type="experiment"
          :code="currentData.typeCode"
          :id="currentData.id"
        ></relative-list>
      </TabPane>
      <TabPane label="课程" name="course">
        <relative-list
          ref="courseRef"
          type="course"
          :code="currentData.typeCode"
          :id="currentData.id"
        ></relative-list>
      </TabPane> -->
    </Tabs>
  </Modal>
</template>

<script>
import usally from '@/mixin/usally';
import encryption from '@/libs/encryption.js';
import RelativeList from './relativeList.vue';
import toolTypeMixin from '@/mixin/dictMixin'
export default {
  name: 'skillTreePlan',
  components: { RelativeList },
  mixins: [usally,toolTypeMixin],
  data() {
    let September = sessionStorage.getItem('November');
    September = JSON.parse(encryption.SelfUseDecrypt(September));
    return {
      USER_ID: September.userId,
      USER_Name: September.nickname,
      isRootDesigner: September.isRootDesigner,
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      fullWidth: document.documentElement.clientWidth,
      setTableHei: 'auto',
      currentData: {},
      //方案
      show: false,
      showType: '',
      currentValue: 'vedio',
      tabList:[
        {
          label:"视频",
          name:"vedio",
          route:'videoLearn'
        },
        {
          label:"试卷",
          name:"testPaper",
          route:'testPaper',
        },
        {
          label:"课件",
          name:"experiment",
          route:'experiment'
        },
        {
          label:"课程",
          name:"course",
          route:'course'
        }
      ],
      directionArr:[]
    };
  },
  computed:{
    showTablist(){
      return this.tabList && this.tabList.filter(tab => this.$store.getters.getMenuName(tab.route))
    }
  },
  mounted() {},
  methods: {
    async openModel(data, type) {
      //type表示是展示详情还是操作
      this.showType = type;
      this.show = true;
      this.currentData = { ...data };
      if(this.showTablist.length > 0){
        this.$nextTick(() => {
          this.currentValue = this.showTablist[0].name;
          this.changeTab(this.showTablist[0].name);
        })
      }
      //获取课件方向
      let {data:allData} = await this.getDictByName('newDirectionType');
      this.allDict = allData;
      this.directionArr = this.getLevelData(allData,1);
    },
    closeModal() {
      this.$emit('close');
    },
    changeTab(name) {
      const n = name + 'Ref';
      this.$refs[n][0].initSearch(name);
      this.$refs[n][0].init(
        name,
        this.currentData.typeCode,
        this.currentData.id,
        this.showType,
        'tab',
        'needCopy'
      );
    },
    getType(typeCode){
        if(typeCode){
            let typeList = typeCode.split(',');
            return typeList.map(type => {
                let typeInfo = this.allDict.find(item => item.dictid ===  type);
                if(typeInfo){
                    let direction = this.allDict.find(item => item.dictid ===  typeInfo.parentid);
                    if(direction){
                        return direction ? direction.dictname : ''
                    }else{
                        return typeInfo ? typeInfo.dictname : ''
                    }
                }else{
                    return ''
                }
            }).filter(item => item).join(',')
        }else{
            return ''
        }
    },
  }
};
</script>
<style scoped src="./skill.css"></style>
